<template>
    <view class="margin-top-xl x-srcoll-swiper"  @touchmove="srcollMove"  @touchstart="srcollStart" @touchend="srcollEnd">
        <!--  :style="[{'--marginLeft': item.marginLeft}]"  -->
        <view class="x-srcoll-swiper-item"  v-for="(item, index) in swiperList" :key="index" :style="[{'marginLeft': item.marginLeft + 'px'}]">
                <image style="border-radius: 10px;" class="hw-128" :src="item.url"  mode="scaleToFill" /> 
        </view>
        <view class="w text-center">{{screenWidth}}</view>
    </view>
</template>
<script setup lang="ts">
import {ref, reactive, onMounted} from "vue"
const systemInfo = uni.getSystemInfoSync()
const towerStart = ref(0)
const direction = ref(1)
const screenWidth = systemInfo.screenWidth
const imgWidth = ref(128)
const lrMargin = ref(7)
const maxSrcollWidth =ref(0)
const swiperList = reactive<any>([
    {id: 0,type: 'image',url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'},
    {id: 1,type: 'image',url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big37006.jpg',}, 
    {id: 2,type: 'image',url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg'}, 
    {id: 3,type: 'image',url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg'}, 
    {id: 4,type: 'image',url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big25011.jpg'}, 
    {id: 5,type: 'image',url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big21016.jpg'}, 
    {id: 6,type: 'image',url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg'}
])


// 滑动开始
function srcollStart(event: any){
    towerStart.value = event.touches[0].pageX
}

// 滑动
function srcollMove(event: any){
   direction.value = event.touches[0].pageX - towerStart.value > 0 ? 1 : -1;
}

// 滑动结束
function srcollEnd(){
   swiperList[0].marginLeft = swiperList[0].marginLeft + (direction.value) * ( (imgWidth.value * 2) + 4 + (lrMargin.value * 2) );
   if(direction.value > 0){
        if(swiperList[0].marginLeft >= lrMargin.value){
             swiperList[0].marginLeft = lrMargin.value;
        }
   }else{
        let maxValue = (maxSrcollWidth.value * -1)
        if(swiperList[0].marginLeft <= maxValue){
           swiperList[0].marginLeft = maxValue;
        }
   }

 
}

function initFn(){
  for(let i = 0; i < swiperList.length; i++){
    swiperList[i].marginLeft = lrMargin.value
  }

   let totalWidth = imgWidth.value * swiperList.length + lrMargin.value *  swiperList.length
   maxSrcollWidth.value = totalWidth - screenWidth +  swiperList.length * 2
  
}


onMounted(() => {
 initFn()

})
</script>
<style lang="scss" scoped>
.x-srcoll-swiper{
    white-space: nowrap;
}


.x-srcoll-swiper-item{
    display: inline-block;
    border: 1px solid rgb(236, 240, 3);
    border-radius: 10px;
    transition: all 0.5s ease-in 0s;
}
</style>